<template>
  <div class="desktop-icons">
    <div
      v-for="app in apps"
      :key="app.id"
      class="desktop-icon"
      :class="{ active: activeApp === app.id }"
      @click="openApp(app)"
      @dblclick="openApp(app)"
    >
      <div class="icon-wrapper">
        <div class="app-icon" :style="{ backgroundColor: app.color }">
          <span v-if="app.icon" class="icon-text">{{ app.icon }}</span>
          <svg
            v-else
            width="32"
            height="32"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path
              d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2"
            />
          </svg>
        </div>
      </div>
      <div class="app-name">{{ app.name }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { App } from "@/types/common";

// 定义组件事件
const emit = defineEmits<{
  open: [app: App];
}>();

// 桌面应用程序
const apps: App[] = [
  {
    id: "accounting",
    name: "记账管理",
    icon: "💰",
    color: "#22c55e",
    requiresAuth: true,
  },
  {
    id: "schedule",
    name: "日程管理",
    icon: "📅",
    color: "#3b82f6",
    requiresAuth: true,
  },
  {
    id: "fuel-records",
    name: "油耗统计",
    icon: "⛽",
    color: "#ef4444",
    requiresAuth: true,
  },
];

// 当前活跃的应用
const activeApp = ref<string | null>(null);

// 打开应用
const openApp = (app: App) => {
  activeApp.value = app.id;
  emit("open", app);

  // 重置活跃状态
  setTimeout(() => {
    activeApp.value = null;
  }, 300);
};
</script>

<style lang="scss" scoped>
.desktop-icons {
  position: fixed;
  top: calc(10vh + 80px + 24px);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;
  max-width: calc(3 * 100px + 2 * 32px);
  z-index: 1000;
  grid-auto-flow: row dense;
  justify-content: center;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  justify-self: start;
  width: 100px;
  height: 120px;

  &:hover {
    background: var(--el-bg-color-overlay);
    transform: translateY(-2px) scale(1.05);
    backdrop-filter: blur(10px);
  }

  &.active {
    background: var(--el-bg-color-overlay);
    transform: scale(0.95);
    backdrop-filter: blur(15px);
  }
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}

.app-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-text-color-primary);
  font-size: 24px;
  background: var(--el-bg-color);
  backdrop-filter: blur(20px);
  border: 1px solid var(--el-border-color);
  transition: all 0.3s ease;

  .desktop-icon:hover & {
    transform: translateY(-2px) scale(1.1);
    background: var(--el-bg-color-overlay);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  .desktop-icon.active & {
    transform: scale(0.9);
    background: var(--el-bg-color-overlay);
  }
}

.icon-text {
  font-size: 24px;
}

.app-name {
  font-size: 12px;
  color: var(--el-text-color-primary);
  text-align: center;
  font-weight: 500;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .desktop-icons {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 16px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    max-width: 90%;
  }

  .desktop-icon {
    width: 80px;
    height: 100px;
  }

  .icon-wrapper {
    width: 48px;
    height: 48px;
  }

  .app-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .icon-text {
    font-size: 20px;
  }

  .app-name {
    font-size: 10px;
    max-width: 70px;
  }
}
</style>
